<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Basic Accordion - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../../../js/lib/jquery-easyui-v1.5.1/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../js/lib/jquery-easyui-v1.5.1/themes/icon.css">

		<script type="text/javascript" src="../../../js/lib/jquery-easyui-v1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="../../../js/lib/jquery-easyui-v1.5.1/jquery.easyui.min.js"></script>
	</head>

	<body>
		<h1>easyui Tree 实现空文件夹显示</h1>
		<div>
			<div onclick="appendFile()" class="easyui-linkbutton">新增文件</div>
			<div onclick="appendFolder()" class="easyui-linkbutton">新增文件夹</div>
			<div onclick="removeit()" class="easyui-linkbutton">移除</div>
			<div onclick="expand()" class="easyui-linkbutton">展开</div>
			<div onclick="collapse()" class="easyui-linkbutton">折叠</div>
		</div>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px;width:600px;" title="Tree">
			<ul id="tt"></ul>
		</div>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="appendFile()" data-options="iconCls:'icon-add'">新增文件</div>
			<div onclick="appendFolder()" data-options="iconCls:'icon-add'">新增文件夹</div>
			<div onclick="removeit()" data-options="iconCls:'icon-remove'">移除</div>
			<div class="menu-sep"></div>
			<div onclick="expand()">展开</div>
			<div onclick="collapse()">折叠</div>
		</div>
		<script type="text/javascript">
			var t = $('#tt');
			var data = [{
				"id": 1,
				"text": "Root",
				"children": [{
					"id": 11,
					"text": "Level-1-A",
					"state": "closed",
					"children": [{
						"id": 111,
						"text": "Level-2-A"
					}]
				}, {
					"id": 12,
					"text": "Level-1-B",
					"children": [{
						"id": 121,
						"text": "Level-2-D"
					}]
				}, {
					"id": 13,
					"state": "closed",
					"text": "Level-1-C"
				}, {
					"id": 14,
					"text": "Level-1-D"
				}, {
					"id": 15,
					"text": "Level-1-E"
				}]
			}];
			t.tree({
				data: data,
				animate: true,
				onContextMenu: function(e, node) {
					e.preventDefault();
					$(this).tree('select', node.target);
					$('#mm').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}
			})

			function appendFile() {
				debugger;
				var node = t.tree('getSelected');
				t.tree('append', {
					parent: (node ? node.target : null),
					data: [{
						text: 'new item'
					}]
				});
				if(node.state==="closed"){
					t.tree('expand',node.target);
				}
			}

			function appendFolder() {
				debugger;
				var node = t.tree('getSelected');
				t.tree('append', {
					parent: (node ? node.target : null),
					data: [{
						text: 'new folder',
						state: 'closed'
					}]
				});
				if(node.state==="closed"){
					t.tree('expand',node.target);
				}
			}

			function removeit() {
				var node = $('#tt').tree('getSelected');
				var p = $('#tt').tree('getParent', node.target);
				$('#tt').tree('remove', node.target);
				if(p.children.length === 0) {
					var t = p.target;
					var nodeIcon = $(t).find('span.tree-icon');
					nodeIcon.removeClass('tree-file').addClass('tree-folder tree-folder-open');
					var hit = $('<span class="tree-hit tree-expanded"></span>').insertBefore(nodeIcon);
					if(hit.prev().length) {
						hit.prev().remove();
					}
				}
			}
			function collapse() {
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('collapse', node.target);
			}

			function expand() {
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('expand', node.target);
			}
		</script>
	</body>

</html>